<template>
  <div>
    <div class="wrapper">
      <comp-pagetitle><template>车主服务</template></comp-pagetitle>
      <div class="pinpai">
        <ul>
          <li v-for="item in listarr" :key="item.id">
            <div class="left">{{ item.title }}</div>
            <div class="right">
              <img :src="item.picUrl" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>
    <comp-footer></comp-footer>
  </div>
</template>

<script>
import CompPagetitle from "@/components/comp-pagetitle.vue";
import CompFooter from "@/components/comp-footer.vue";
export default {
  name: "Service",
  components: {
    CompPagetitle,
    CompFooter,
  },
  data() {
    return {
      listarr: [
        {title: "售后服务",id: "00000001",url: "#",picUrl: require("@/assets/images/service/service_400000033.jpg"),},
        {title: "智能手机应用",id: "00000002",url: "#",picUrl: require("@/assets/images/service/service_400000034.jpg"),},
        {title: "雷克萨斯智行互联",id: "00000003",url: "#",picUrl: require("@/assets/images/service/service_400000035.jpg"),},
        {title: "雷克萨斯智能副驾",id: "00000004",url: "#",picUrl: require("@/assets/images/service/service_400000036.jpg"),},
        {title: "雷克萨斯手机互联",id: "00000005",url: "#",picUrl: require("@/assets/images/service/service_400000037.jpg"),},
        {title: "雷克萨斯汽车精品",id: "00000006",url: "#",picUrl: require("@/assets/images/service/service_400000038.jpg"),},
        {title: "雷克萨斯生活精品",id: "00000007",url: "#",picUrl: require("@/assets/images/service/service_400000039.jpg"),},
        {title: "顾客常见问与答",id: "00000008",url: "#",picUrl: require("@/assets/images/service/service_400000718.jpg"),}
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  background-color: #f2f2f2;
  padding: 30px 0;
}
.pinpai {
  width: 1140px;
  margin: 60px auto;
  ul {
    width: 100%;
    li {
      cursor: pointer;
      width: 100%;
      height: 298px;
      overflow: hidden;
      background-color: #fff;
      margin-bottom: 30px;
      display: flex;
      .left {
        width: 385px;
        height: 298px;
        line-height: 298px;
        text-align: center;
        font-size: 26px;
        color: #444444;
      }
      .right {
        width: 755px;
        height: 298px;
        img {
          width: 755px;
          height: 298px;
        }
      }
    }
  }
}
</style>